<template>
  <div class="swiper appContent" @mouseover="showPage">
    <div
      class="rightBtn"
      @mouseover="rightBtn = true"
      @mouseleave="rightBtn = false"
      :style="rightBtn ? 'z-index:1300' : 'z-index:1100'"
    >
      <el-button
        style="margin-right: 10px"
        :style="rightBtn ? 'opacity:1' : 'opacity:0.3'"
        icon="el-icon-arrow-right"
        @click="nextPage()"
        circle
      ></el-button>
    </div>
    <div
      class="leftBtn"
      @mouseover="leftBtn = true"
      @mouseleave="leftBtn = false"
      :style="leftBtn ? 'z-index:1300' : 'z-index:1100'"
    >
      <el-button
        style="margin-left: 10px"
        :style="leftBtn ? 'opacity:1' : 'opacity:0.3'"
        icon="el-icon-arrow-left"
        @click="perPage()"
        circle
      ></el-button>
    </div>
    <div class="pageSize">{{ filterPage() }}</div>
    <div class="searchTip" v-show="!isShowSearch">
      <i class="el-icon-arrow-down" style="font-size: 20px"></i>
    </div>
    <div class="moveBox" @mouseover="showSearch" @mouseleave="hideSearch">
      <div
        class="searchBox"
        :class="isShowSearch ? 'swing-in-top-fwd' : 'slide-out-top'"
      >
        <div class="search">
          <el-select
            v-model="equipment"
            @visible-change="visibleSlect"
            placeholder="请选择设备"
            :popper-append-to-body="false"
            autocomplete
            clearable
            filterable
            @change="equipmentChange"
          >
            <el-option
              v-for="item in dictionaryList"
              :key="item.Value"
              :label="item.Text"
              :value="item.Value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="content">
      <el-row :gutter="20">
        <el-col
          :span="8"
          v-for="(item, index) in tabelData"
          :key="item.ID"
          style="height: 30vh; margin-bottom: 10px"
        >
          <div class="border-box horse_run">
            <div class="title">
              <div class="bounce-top shadow" @click="goDetalis(item)">
                {{ item.Name }}（{{ item.Model }}）
              </div>
            </div>
            <div class="mainBox">
              <div style="width: 250px" class="echartsBox">
                <div ref="main" style="width: 100%; height: 20vh"></div>
              </div>
              <div class="echartsBox" style="width: 250px">
                <div ref="bar" style="width: 100%; height: 19vh"></div>
              </div>

              <div class="btn shadow" :class="item.State">
                {{ filterStatus(item.State) }}
              </div>
            </div>
          </div>
          <div>{{ initCir(index, item) }} {{ initBar(index, item) }}</div>
        </el-col>
      </el-row>
    </div>

    <!-- <div v-show="isShowPage">
      <div class="perbtn" @mouseover="btnHover">
        <el-button
          icon="el-icon-arrow-left"
          @click="getList()"
          circle
        ></el-button>
      </div>
      <div class="nexBtn" @mouseover="btnHover">
        <el-button
          icon="el-icon-arrow-right"
          @click="getList()"
          circle
        ></el-button>
      </div>
      <div class="page">1/10</div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { GetDeviceStatusList, GetDictionary } from "@/api/index";
export default {
  components: {},
  data() {
    return {
      dictionaryList: [],
      rightBtn: false,
      leftBtn: false,
      colorList: {
        START: "START",
        STOP: "STOP",
        HOLD: "HOLD",
        RESET: "RESET",
        RESTART: "RESTART",
        MSTR: "MSTR",
        ERROR: "ERROR",
      },
      isShowSearch: false,
      searchText: "",
      isShowPage: false,
      time: undefined,
      selectIsOpen: false,
      equipment: "",
      chartCirObj1: undefined,
      chartCirObj: {
        0: undefined,
        1: undefined,
        2: undefined,
        3: undefined,
        4: undefined,
        5: undefined,
        6: undefined,
        7: undefined,
        8: undefined,
      },
      chartPerObj: {
        0: undefined,
        1: undefined,
        2: undefined,
        3: undefined,
        4: undefined,
        5: undefined,
        6: undefined,
        7: undefined,
        8: undefined,
      },
      queryparams: {
        PageIndex: 1,
        PageSize: 9,
      },
      options: [
        {
          value: "选项1",
          label: "生产线1",
        },
        {
          value: "选项2",
          label: "加工中心",
        },
        {
          value: "选项3",
          label: "滚丝机",
        },
        {
          value: "选项4",
          label: "车床",
        },
        {
          value: "选项5",
          label: "VM产线",
        },
      ],
      tabelData: [],
      total: 0,
    };
  },
  computed: {
    ...mapState(["sidebarShow"]),
  },
  async mounted() {
    window.addEventListener("resize", this.resize, true);
    await this.getDictionaryFun();
    this.getList();
  },
  destroyed() {
    window.removeEventListener("resize", this.resize, true);
  },
  methods: {
    reset() {
      this.chartCirObj = {
        0: undefined,
        1: undefined,
        2: undefined,
        3: undefined,
        4: undefined,
        5: undefined,
        6: undefined,
        7: undefined,
        8: undefined,
      };
      this.chartPerObj = {
        0: undefined,
        1: undefined,
        2: undefined,
        3: undefined,
        4: undefined,
        5: undefined,
        6: undefined,
        7: undefined,
        8: undefined,
      };
    },
    perPage() {
      if (this.queryparams.PageIndex > 1) {
        this.queryparams.PageIndex--;
        this.getList();
      }
    },
    nextPage() {
      if (this.queryparams.PageIndex < Math.ceil(this.total / 9)) {
        this.queryparams.PageIndex++;
        this.getList();
      }
    },
    filterPage() {
      return this.queryparams.PageIndex + "/" + Math.ceil(this.total / 9);
    },
    filterStatus(status) {
      let text = status.toString().toUpperCase();
      let val = "";
      switch (text) {
        case "START":
          val = "启动";
          break;
        case "STOP":
          val = "停止";
          break;
        case "HOLD":
          val = "暂停";
          break;
        case "RESET":
          val = "复位";
          break;
        case "RESTART":
          val = "程序";
          break;
        case "MSTR":
          val = "手动";
          break;
        case "ERROR":
          val = "关机";
          break;
      }
      return val;
    },
    equipmentChange() {
      this.reset();
      this.queryparams.PageIndex = 1;
      this.getList();
    },
    goDetalis(item) {
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          Code: item.Code,
          Name: item.Name,
        },
      });
    },
    async getDictionaryFun() {
      try {
        let query = {
          Key: "Device",
        };
        let res = await GetDictionary(query);
        if (res.Result && res.Data?.length) {
          this.dictionaryList = res.Data;
          this.equipment = res.Data[0].Value;
          console.log(this.equipment);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getList() {
      let query = {
        ...this.queryparams,
        Classification: this.equipment,
      };
      try {
        let res = await GetDeviceStatusList(query);
        this.tabelData = res.Data.List;
        this.total = res.Data.Total;
      } catch (error) {
        console.log(error);
      }
    },
    initCir(index, item) {
      this.$nextTick(() => {
        if (this.chartCirObj[index]) return;
        let chartDom = this.$refs.main[index];
        let myChart = echarts.init(chartDom);
        this.chartCirObj[index] = myChart;
        let option;
        option = {
          series: [
            {
              name: "Pressure",
              type: "gauge",
              progress: {
                show: true,
                overlap: true,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: "#1D86DE",
                },
                roundCap: true,
              },
              pointer: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                roundCap: true,
              },
              axisLabel: {
                show: false,
              },
              anchor: {
                show: false,
                showAbove: false,
                size: 25,
                itemStyle: {
                  borderWidth: 10,
                },
              },
              data: [
                {
                  value: parseInt((item.RunTime / item.MonetaryLength) * 100),
                  name: "OEE",
                  title: {
                    // offsetCenter: ["0%", "-30%"],
                    color: "white",
                  },
                  detail: {
                    valueAnimation: true,
                    offsetCenter: ["0%", "-20%"],
                  },
                },
              ],
              detail: {
                color: "white",
                formatter: "{value}%",
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
    },
    initBar(index, item) {
      this.$nextTick(() => {
        if (this.chartPerObj[index]) return;
        let chartDom = this.$refs.bar[index];
        let myChart = echarts.init(chartDom);
        this.chartPerObj[index] = myChart;
        let option;
        option = {
          title: {
            text: "设备模式",
            // subtext: "Fake Data",
            top:'10',
            left: "center",
            textStyle: {
              fontSize: "14px",
              color:'white'
            },
          },
          grid: {
            bottom: 0,
          },
          tooltip: {
            trigger: "item",
            // formatter: " {a}<br/> {b}："+'{value}',
            valueFormatter: (value) => {
              return parseInt(value / 60) + "分";
            },
            backgroundColor: "rgb(13, 88, 163)",
            textStyle: {
              color: "white",
            },

            // opacity: 0.9;
          },
          // legend: {
          //   right:20,
          //   top: 40,
          //   bottom: 20,
          //   orient: "vertical",
          // },
          label: {
            show: false,
            position: "center",
          },
          series: [
            {
              name: "状态",
              type: "pie",
              // center: ['30%', '50%'],
              radius: ["20%", "70%"],
              label: {
                show: true,
                position: "inner",
                color: "white",
              },
              itemStyle: {
                borderRadius: 4,
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: [
                {
                  value: item.EDIT,
                  // value: 100,
                  name: "EDIT",
                  itemStyle: { color: "#696969" },
                },
                {
                  value: item.HND,
                  // value: 100,
                  name: "HND",
                  itemStyle: { color: "#0A9F5E" },
                },
                {
                  value: item.JOG,
                  // value: 100,
                  name: "JOG",
                  itemStyle: { color: "#1D86DE" },
                },
                {
                  value: item.MDI,
                  // value: 100,
                  name: "MDI",
                  itemStyle: { color: "#9C5EFD" },
                },
                {
                  value: item.MEM,
                  // value: 100,
                  name: "MEM",
                  itemStyle: { color: "#D2691E" },
                },
                {
                  value: item.REF,
                  // value: 100,
                  name: "REF",
                  itemStyle: { color: "#008080" },
                },
                {
                  value: item.RMT,
                  // value: 100,
                  name: "RMT",
                  itemStyle: { color: "#8B0000" },
                },
              ],
              emphasis: {
                itemStyle: {
                  borderRadius: 10,
                  borderColor: "#fff",
                  borderWidth: 2,
                },
                scale: true,
                scaleSize: 5,
              },
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
    visibleSlect(bool) {
      setTimeout(() => {
        if (!bool) this.isShowSearch = false;
        this.selectIsOpen = bool;
      });
    },
    resize() {
      Object.values(this.chartCirObj)
        .filter((item) => item)
        .map((item) => {
          item.resize();
        });
      Object.values(this.chartPerObj)
        .filter((item) => item)
        .map((item) => {
          item.resize();
        });
    },
    showPage() {
      this.isShowPage = true;
      clearTimeout(this.time);
      this.time = null;
      this.time = setTimeout(() => {
        this.isShowPage = false;
      }, 3000);
    },
    showSearch() {
      this.isShowSearch = true;
    },
    hideSearch() {
      setTimeout(() => {
        if (!this.selectIsOpen) {
          this.isShowSearch = false;
        }
      }, 200);
    },
    btnHover() {
      this.showPage();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .echartsBox {
  width: 100%;
  height: 100%;
  div {
    &:nth-child(1) {
      width: 100% !important;
      height: 100% !important;
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}
.rightBtn {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.leftBtn {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.content {
  position: relative;
  .menuTip {
    position: absolute;
    left: -40px;
    color: white;
    top: 10px;
    cursor: pointer;
  }
}
.searchTip {
  margin: auto;
  position: absolute;
  color: white;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  cursor: pointer;
  top: 0;
}

$START: #0a9f5e;
$STOP: #8b0000;
$HOLD: #1d86de;
$RESET: #9c5efd;
$RESTART: #d2691e;
$MSTR: #008080;
$ERROR: #696969;

$yunxin: rgb(62, 224, 84);
$guanji: #696969;
$tiaoji: #1d86de;
$shoudong: #9c5efd;
$xianzhi: #eebf5d;
:deep(.el-button--medium.is-circle) {
  background-color: #1d86de;
  color: white;
}
:deep(.searchBox) {
  .search {
    .el-select {
      border: none !important;
      display: flex;
      .el-input__inner {
        border-radius: 4px 4px 0 0;
        background-color: rgb(13, 88, 163) !important;
        opacity: 0.9;
        color: white;
        border: none;
        &::placeholder {
          color: rgb(236, 235, 235);
        }
      }
      .el-popper {
        margin-top: 0 !important;
        left: 0 !important;
        background-color: rgb(13, 88, 163) !important;
        border: none;
        opacity: 0.9;
        border-radius: 0 0 4px 4px;

        .el-select-dropdown__item {
          color: white !important;
        }
        .el-select-dropdown__item.hover {
          background-color: rgb(9, 64, 119);
        }
        .popper__arrow {
          left: 0 !important;
          display: none;
        }
        &::after {
          content: "";
          top: 0px;
          margin-left: 0px;
          border-top-width: 0;
          border-bottom-color: #ffffff;
        }
      }
    }
  }
}

.START {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $START
  ) !important;
  border: 1px solid $START !important;
}

.STOP {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $STOP
  ) !important;
  border: 1px solid $STOP !important;
}

.HOLD {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $HOLD
  ) !important;
  border: 1px solid $HOLD !important;
}

.RESET {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $RESET
  ) !important;
  border: 1px solid $RESET !important;
}
.RESTART {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $RESTART
  ) !important;
  border: 1px solid $RESTART !important;
}
.MSTR {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $MSTR
  ) !important;
  border: 1px solid $MSTR !important;
}
.ERROR {
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    $ERROR
  ) !important;
  border: 1px solid $ERROR !important;
}

.swiper {
  padding: 20px 50px;
  position: relative;

  .moveBox {
    height: 24px;
    // border: 1px solid red;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 1100;
    .searchBox {
      height: 30px;
      width: 100%;
      // background-image: linear-gradient(
      //   to top,
      //   rgba(255, 0, 0, 0),
      //   rgb(177, 180, 182)
      // );
      .search {
        position: absolute;
        top: 20px;
        z-index: 1120;
        height: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
      }
    }
  }
  .perbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
  }
  .nexBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
  }
  .page {
    text-align: center;
    color: white;
  }
}
.mainBox {
  display: flex;
  align-items: center;
  height: calc(100% - 34px);
  .btn {
    padding: 10px 20px;
    margin-right: 20px;
    cursor: pointer;
    color: white;
    white-space: nowrap;
    word-break: keep-all;
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), $guanji);
    border-radius: 20px;
    border: 1px solid $guanji;
    box-shadow: 0px 2px rgb(238, 236, 236);
  }
  .btn:active {
    transform: translateY(2px);
    box-shadow: 0px 0px rgb(70, 68, 68);
  }
}
.border-box {
  margin-bottom: 20px !important;
}
.border-box {
  position: relative;
  width: 100%;
  height: 300px;
  background: rgba(16, 12, 42);
  box-shadow: 0 0 3px orange;
  border: 2px solid #00a1ff;
  border-radius: 8px;
}

.border-box .title {
  color: white;
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0),
    rgba(0, 161, 255, 1),
    rgba(255, 0, 0, 0)
  );
  margin-top: 4px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
}

.border-box .title .shadow {
  text-shadow: rgb(65, 63, 63) 1px 1px;
}

.horse_run {
  z-index: 1000;
  background-image: linear-gradient(
      90deg,
      rgba(196, 233, 64, 0) 0%,
      rgb(62, 224, 84) 100%
    ),
    linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%),
    linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%),
    linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
  background-position: -100px 1px, calc(100% - 1px) -100px,
    calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear;
  height: calc(100% - 2px);
  padding: 1px;
  background-clip: content-box;
}

#main {
  color: white;
}
.pageSize {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  margin-bottom: 10px;
}
</style>
